.root {
  .layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 2000;
    &.enter {
      background: rgba(0, 0, 0, .0);
      .content {
        top: 48%;
        opacity: 0;
      }
    }
    &.enter.enterActive {
      transition: background .3s ease;
      background: rgba(0, 0, 0, .4);
      .content {
        top: 50%;
        opacity: 1;
        transition: all .3s ease;
      }
    }
    .content {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    &.leave {
      background: rgba(0, 0, 0, .4);
      .content {
        top: 50%;
        opacity: 1;
      }
    }
    &.leave.leaveActive {
      transition: background .3s ease;
      background: rgba(0, 0, 0, .0);
      .content {
        top: 48%;
        opacity: 0;
        transition: all .3s ease;
      }
    }
  }
}